<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>搜索</title>
		<style>
			html,
			body,
			.mui-content {
				background-color: #fff;
			}
			
			dl,
			dt,
			dd {
				margin: 0;
				padding: 0;
			}
			
			.mui-content {
				padding-bottom: 40px;
			}
			
			.search-form {
				display: -webkit-flex;
				display: flex;
				padding: 20px 18px 0;
			}
			
			.search-form .search-form__input {
				-webkit-flex: 1;
				flex: 1;
				margin-bottom: 0;
				border: 1px solid #ddd;
				border-right: none;
				background-color: #fff;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			
			.search-form .search-form__btn {
				width: auto;
				padding: 0 6px;
				font-size: 24px;
				line-height: 1;
				border-color: #159ceb;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
			
			.search-form .search-form__btn:active {
				border-color: #159ceb;
			}
			
			.mui-input-row .mui-input-speech~.mui-icon-speech {
				top: 24px;
				right: 56px;
			}
			
			.mui-input-row .mui-input-clear~.mui-icon-clear {
				top: 27px;
				right: 56px;
			}
			
			.search-history dl dt,
			.search-history dl dd {
				padding: 19px;
				font-size: 14px;
				border-bottom: 1px solid #ddd;
			}
			
			.search-history dl dt {
				color: #999;
			}
			
			.search-history dl dd:active {
				background-color: #eee;
			}
			
			.empty-history {
				margin-top: 40px;
				text-align: center;
			}
			
			.empty-history .empty-btn {
				font-size: 16px;
				border-color: #159ceb;
			}
			
			.list {
				margin-top: 20px;
			}
			
			.list .mui-table-view-cell .video-media {
				position: relative;
				margin-right: 10px;
			}
			
			.list .video-media .video-media__icon {
				display: block;
				position: absolute;
				bottom: 5px;
				right: 5px;
				width: 20px;
				height: 20px;
				border: 1px solid #fff;
				border-radius: 50%;
			}
			
			.list .video-media .video-media__icon .video-media__play {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 0;
				height: 0;
				border-left: 7px solid #fff;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
			}
			
			.list .mui-table-view-cell.mui-media .mui-media-object {
				display: block;
				width: 91px;
				height: 65px;
				max-width: 100px;
			}
			
			.list .mui-table-view-cell.mui-media .mui-media-body {
				position: relative;
				white-space: normal;
				font-size: 18px;
			}
			
			.list .mui-table-view-cell .mui-media-body .news-time {
				margin-top: 10px;
			}
			
			.list .mui-table-view-cell .mui-media-body .time {
				color: #999;
				font-size: 14px;
			}
			
			.list .mui-table-view-cell .mui-media-body .news-tag {
				position: absolute;
				right: 35px;
				bottom: 0;
			}
			
			.list .mui-table-view-cell .mui-media-body .news-tag-top {
				position: absolute;
				right: 0;
				bottom: 0;
			}
			
			.list .mui-table-view-cell .mui-media-body .tag {
				display: inline-block;
				width: 30px;
				line-height: 16px;
				text-align: center;
				font-size: 12px;
				border-width: 1px;
				border-style: solid;
				border-radius: 3px;
			}
			
			.list .mui-table-view-cell .mui-media-body .special-tag {
				color: #159ceb;
				border-color: #159ceb;
			}
			
			.list .mui-table-view-cell .mui-media-body .expand-tag {
				color: #e53d3d;
				border-color: #e53d3d;
			}
			
			.list .mui-table-view-cell.imgs-cell .mui-media-body {
				height: auto;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__pic {
				display: -webkit-flex;
				display: flex;
				margin-right: -5px;
				margin-top: 5px;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__info {
				overflow: hidden;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__pic .img {
				-webkit-flex: 1;
				flex: 1;
				margin-right: 8px;
				overflow: hidden;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__pic .img img {
				width: 100%;
			}
			
			.list .mui-table-view-cell .mui-media-body .imgs-tag {
				color: #ec00fb;
				border-color: #ec00fb;
			}
			
			.list--images {
				background-color: #e6e6e6;
			}
			
			.list--images li {
				margin-bottom: 10px;
			}
			
			.list--images .images-body {
				position: relative;
			}
			
			.list--images .images-body .images-body__icon {
				position: absolute;
				bottom: 14px;
				right: 11px;
			}
			
			.icon-imgs {
				display: block;
				width: 23px;
				height: 17px;
				background: url(../../images/pic.png) no-repeat 0 0/contain;
			}
			
			.list--images .images-body img {
				display: block;
				max-width: 100%;
			}
			
			.list--images .text-body {
				padding: 11px 15px;
				overflow: hidden;
				text-align: justify;
				background-color: #fff;
				font-size: 18px;
				color: #000;
			}
			
			.list--images .text-body .text-body__time {
				color: #999;
				font-size: 14px;
			}
			
			.mui-scroll-wrapper {
				top: 98px;
			}
			
			.nothing {
				margin-top: 20px;
				padding: 11px 0;
				border-top: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
			}
		</style>
	</head>

	<body>
		<input type="hidden" id="keywords" name="keywords">
		<header class="mui-bar mui-bar-nav navbar-default">
			<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
			<h1 class="mui-title c-white">搜索</h1>
		</header>
		<div class="mui-content">
			<div class="search-form mui-input-row">
				<input type="search" class="mui-input-clear search-form__input" id="searchIpt" placeholder="请输入关键字...">
				<button type="button" class="mui-btn mui-btn-blue search-form__btn bg-blue" id="searchBtn"><i class="mui-icon iconfont">&#xe600;</i></button>
			</div>
			<div class="search-content">
				<!-- 历史记录 -->
				<div id="searchContent" style="display: none;">

				</div>
				<div id="pullrefresh" class="mui-scroll-wrapper" style="display: block;">
					<div class="mui-scroll">
						<!-- 搜索结果列表 -->
						<ul class="mui-table-view list" id="list">
							
						</ul>
					</div>
				</div>
				<div class="nothing c-blue mui-text-center" id="nothing" style="display: none;">无搜索结果</div>
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/template.js"></script>
		<script src="../../js/base64.js"></script>
		<script src="../../js/common.js"></script>
		<!-- 历史搜索记录模板 -->
		<script id="historyList" type="text/html">
			<div class="search-history">
				<dl>
					<dt>历史搜索</dt> {{each arr as value i}}
					<dd>{{value}}</dd>
					{{/each}}
				</dl>
			</div>
			<div class="empty-history">
				<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined empty-btn c-blue" id="emptyBtn">清空历史记录</button>
			</div>
		</script>
		<!-- 图文模板 -->
		<script id="newsList" type="text/html">
			{{each list as value i}} 
				{{if value.type == 1}}
					<!-- 图集 -->
					<li class="mui-table-view-cell mui-media imgs-cell">
						<a href="{{value.outerLinkUrl}}" data-id="{{value.id}}" data-type="{{value.type}}" data-columnsId="{{value.columnsId}}" data-subjectId="{{value.subjectId}}" data-isOuterLink="{{value.isOuterLink}}">
							<div class="mui-media-body">
								<span class="title">{{value.title}}</span>
								<div class="imgs-cell__pic">
									{{each value.imgs as item i}}
									<span class="img"><img src="{{item}}"></span> {{/each}}
								</div>
								<div class="imgs-cell__info">
									<div class="mui-pull-left"><time class="time">{{value.releaseAtMinNumber}}</time></div>
									<div class="mui-pull-right"><span class="tag special-tag">{{value.columnName}}</span></div>
									{{if value.subjectId !== null}}
										<div class="mui-pull-right" style="margin-right: 5px;"><span class="tag special-tag">专题</span></div>
									{{else}}
										<div class="mui-pull-right" style="margin-right: 5px;"><span class="tag imgs-tag">图集</span></div>
									{{/if}}
								</div>
							</div>
						</a>
					</li>
				{{else if value.type == 2}}
					<!-- 视频 -->
					<li class="mui-table-view-cell mui-media">
						<a href="{{value.outerLinkUrl}}" data-id="{{value.id}}" data-type="{{value.type}}" data-columnsId="{{value.columnsId}}" data-subjectId="{{value.subjectId}}" data-isOuterLink="{{value.isOuterLink}}">
							<div class="mui-pull-left video-media">
								<img class="mui-media-object" src="{{value.carouselImage}}" onerror="this.src='../../images/lauch/def/tw_def.png'">
								<div class="video-media__icon">
									<span class="video-media__play"></span>
								</div>
							</div>
							<div class="mui-media-body image-text">
								<span class="title">{{value.title}}</span>
								<div class="news-time"><time class="time">{{value.releaseAtMinNumber}}</time></div>
								<div class="news-tag-top"><span class="tag special-tag">{{value.columnName}}</span></div>
								<!-- 添加标签 -->
								{{if value.subjectId !== null}}
									<div class="news-tag"><span class="tag special-tag">专题</span></div>
								{{else}}
									<div class="news-tag"><span class="tag expand-tag">{{value.label}}</span></div>
								{{/if}}
							</div>
						</a>
					</li>
				{{else if value.type == 3}}
					<!-- 投票 -->
					<li class="mui-table-view-cell mui-media">
						<a href="{{value.outerLinkUrl}}" data-id="{{value.id}}" data-title="{{value.title}}" data-type="{{value.type}}" data-columnsId="{{value.columnsId}}" data-subjectId="{{value.subjectId}}" data-subjectName="{{value.subjectName}}" data-isOuterLink="{{value.isOuterLink}}">
							<img class="mui-media-object mui-pull-left" src="{{value.carouselImage}}" onerror="this.src='../../images/lauch/def/tw_def.png'">
							<div class="mui-media-body image-text">
								<span class="title">{{value.title}}</span>
								<div class="news-time"><time class="time">{{value.releaseAtMinNumber}}</time></div>
								<div class="news-tag-top"><span class="tag special-tag">{{value.columnName}}</span></div>
								<!-- 添加标签 -->
								{{if value.label != ""}}
									{{if value.label == "投票"}}	
										<div class="news-tag"><span class="tag special-tag">{{value.label}}</span></div>
									{{/if}}
								{{/if}}
							</div>
						</a>
					</li>
				{{else}} 
					<!-- 图文 -->
					<li class="mui-table-view-cell mui-media">
						<a href="{{value.outerLinkUrl}}" data-id="{{value.id}}" data-type="{{value.type}}" data-columnsId="{{value.columnsId}}" data-subjectId="{{value.subjectId}}" data-isOuterLink="{{value.isOuterLink}}">
							<img class="mui-media-object mui-pull-left" src="{{value.carouselImage}}" onerror="this.src='../../images/lauch/def/tw_def.png'">
							<div class="mui-media-body image-text">
								<span class="title">{{value.title}}</span>
								<div class="news-time"><time class="time">{{value.releaseAtMinNumber}}</time></div>
								<div class="news-tag-top"><span class="tag special-tag">{{value.columnName}}</span></div>
								<!-- 添加标签 -->
								{{if value.label != ""}}
									{{if value.label == "专题"}}	
										<div class="news-tag"><span class="tag special-tag">{{value.label}}</span></div>
									{{else}}
										<div class="news-tag"><span class="tag expand-tag">{{value.label}}</span></div>
									{{/if}}
								{{/if}}
							</div>
						</a>
					</li>
				{{/if}} 
			{{/each}}
		</script>
		<script>
			var count = 0; //上拉加载次数
			var pageSize = 10; //每页加载的数量
			var pageStart = 0;
			var currentDate = new Date().format("yyyy-MM-dd"); //上拉
			var newsDetail = null,
				imgsDetail = null,
				spcTopic = null;
			var keyword = null;
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				},
				beforeback: function() {
					var modeFlag = localStorage.getItem("modeFlag");
					if (modeFlag) {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#000");
					} else {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleDefault");
						plus.navigator.setStatusBarBackground("#fefefe");
					}
					return true;
				}
			});
			//添加night自定义事件监听
			/*window.addEventListener('night', function(event) {
				lkg.nightMode();
			});*/
			mui.plusReady(function() {
				var modeFlag = localStorage.getItem("modeFlag");
				if (modeFlag) {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#000");
				} else {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#159ceb");
				}
				//自动弹出键盘
				openSoftKeyboard("searchIpt");
				//自动调整Webview窗口大小（屏幕区域减去软键盘区域）
				plus.webview.currentWebview().setStyle({
					softinputMode: "adjustResize"
				});
			});
			var historyData = {};
			//监听搜索按钮事件
			document.getElementById("searchBtn").addEventListener("tap", function() {
				keyword = $.trim($(this).closest(".search-form").find("input[type='search']").val());
				$("#keywords").val(keyword);
				historyData.arr = [];
				var keywords = plus.storage.getItem("keywords");
				if (keyword == "" || keyword.length < 2) {
					plus.nativeUI.alert("至少输入两个关键字");
				} else {
					plus.nativeUI.showWaiting("", {
						width: "50px",
						height: "50px",
						background: "rgba(255, 255, 255, 0)",
						style: "black"
					});
					if (keywords) {
						historyData = JSON.parse(keywords);
					}
					historyData.arr.push(keyword);
					historyData.arr = Unique(historyData.arr); //去除重复的关键词
					plus.storage.setItem("keywords", JSON.stringify(historyData)); //保存已搜索的关键词
					$("#list").empty(); //清空搜索结果
					count = 0;
					pageStart = 0;
					pullupRefresh();
					mui('#pullrefresh').pullRefresh().refresh(true); //重置上拉加载
				}
			});
			//监听搜索框聚焦和键盘按键控制事件
			$("#searchIpt").on({
				focus: function() {
					var value = $.trim($(this).val());
					showHistory(value);
				},
				blur: function() {
					var value = $.trim($(this).val());
					showHistory(value);
				},
				keyup: function(e) {
					var value = $.trim($(this).val());
					if (e.keyCode == 8) { //键盘回退按键
						showHistory(value);
					}
					if (e.keyCode == 13) { //键盘回车按键
						var btn = document.getElementById("searchBtn");
						mui.trigger(btn, 'tap');
						$(this).blur();
					}
				}
			});
			$("#searchIpt").on("input propertychange", function() {
				var value = $.trim($(this).val());
				showHistory(value);
			});

			function showHistory(value) {
				if (value == "") {
					var keywords = plus.storage.getItem("keywords");
					//判断本地是否存在已搜索过的关键字
					if (keywords) {
						var historyHtml = template('historyList', JSON.parse(keywords));
						$("#pullrefresh").css("display", "none");
						$("#nothing").css("display", "none");
						$("#searchContent").css("display", "block").html(historyHtml);
						//清空历史记录
						document.getElementById("emptyBtn").addEventListener("tap", function() {
							$("#searchContent").css("display", "none").empty();
							plus.storage.removeItem("keywords");
							historyData.arr.length = 0;
						});
					}
				}
			}
			//点击历史记录的关键字搜索
			mui('#searchContent').on('tap', 'dd', function() {
				$("#list").empty(); //清空搜索结果
				var keyword = $(this).text();
				$("#keywords").val(keyword);
				var ipt = document.getElementById("searchIpt");
				var searchBtn = document.getElementById("searchBtn");
				$(ipt).blur().val(keyword);
				mui.trigger(searchBtn, 'tap');
			});
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				//setTimeout(function() {
				mui.ajax({
					url: baseUrl + '/news/upSSList?start=' + pageStart + '&length=' + pageSize + '&keyword=' + $("#keywords").val(),
					dataType: 'json',
					type: 'get',
					success: function(data) {
						plus.nativeUI.closeWaiting();
						if (data.returnFlag == 0) {
							if (data.total == 0) {
								$("#nothing").css("display", "block");
								$("#searchContent").css("display", "none");
								$("#pullrefresh").css("display", "none");
							} else {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageStart >= data.total)); //参数为true代表没有更多数据了
								mui.each(data.list, function(index, value) {
									if (value.releaseAtMinNumber < 28800000) {
										value.releaseAtMinNumber = Humanize(value.releaseAtMinNumber);
									} else {
										value.releaseAtMinNumber = value.releaseAt;
									}
								});
								var listHtml = template('newsList', data);
								$("#searchContent").css("display", "none");
								$("#nothing").css("display", "none");
								$("#pullrefresh").css("display", "block");
								$("#list").append(listHtml);
								//图片自适应高度
								var img = $("#list .imgs-cell").find("img");
								mui.each(img, function() {
									this.onload = function() {
										this.style.height = AutoHeight(this);
									};
								});
								//标签随文字段落高度自适应位置
								mui.each($("#list .image-text"), function() {
									if ($(this).height() < 65) {
										$(this).css("height", "65px");
										$(this).find(".news-time").addClass("pos");
									}
								});
								//高亮关键字
								mui.each($("#list .title"), function() {
									$(this).html(highlight(
										$(this).html(), [keyword]
									));
								});
								count++;
								pageStart = pageSize * count;
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理
						plus.nativeUI.closeWaiting();
						throwGetNewsError();
					}
				});
				//}, 1000);
			}
			//添加图文列表项的点击事件
			mui('#list').on('tap', 'a', function() {
				gotoDetails($(this));
			});
			var detailPage = null;

			function gotoDetails(that) {
				var id = that.attr('data-id');
				var type = that.attr("data-type");
				var columnsId = that.attr("data-columnsId");
				var subjectId = that.attr("data-subjectId");
				var isOuterLink = that.attr("data-isOuterLink");
				var outerLinkUrl = that.attr("href");
				var href = null;
				//获得详情页面
				if (!detailPage) {
					//外链
					if (isOuterLink == 1) {
						//打开外部链接
						mui.openWindow({
							url: '../news/outer-link.html',
							id: 'outer-link.html',
							extras: {
								outerLinkUrl: outerLinkUrl
							},
							waiting: {
								autoShow: false
							},
							createNew: true
						});
					} else {
						//专题
						/*if (!subjectId) {*/
						if (type == 1) {
							href = 'images-details.html';
							detailPage = plus.webview.getWebviewById('images-details.html');
						} 
						else if(type == 3){
							href = 'vote-details.html';
						}
						else {
							href = 'news-details.html';
							detailPage = plus.webview.getWebviewById('news-details.html');
						}
						/*} else {
							href = 'special-topic.html';
							detailPage = plus.webview.getWebviewById('special-topic.html');
						}*/
						//触发详情页面的detailId事件
						mui.fire(detailPage, 'detailId', {
							id: id,
							subjectId: subjectId,
							columnsId: columnsId
						});
						//打开详情页面          
						mui.openWindow({
							url: '../news/' + href,
							id: href,
							extras: {
								newsId: id
							},
							waiting: {
								autoShow: false
							},
							createNew: true
						});
					}
				}
			}
		</script>
	</body>

</html>